<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta charset="UTF-8">
    <title>欢迎页面</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <%--<meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi"/>--%>
    <%--<link rel="stylesheet" href="static/css/font.css">--%>
    <link rel="stylesheet" href="static/css/xadmin.css">
    <script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <script type="text/javascript" src="static/lib/layui/layui.js"></script>
    <script type="text/javascript" src="static/js/xadmin.js"></script>
    <script type="text/javascript" src="static/js/boUtil.js"></script>
</head>

<body>
<div class="x-body">
    <form class="layui-form" lay-filter="test1">
        <%--表单内容输入区 begin--%>
        <div class="layui-form-item">
            <label class="layui-form-label">商品类目</label>
            <div class="layui-input-inline">
                <a onclick="x_admin_show('分类列表','./item-cat')" class="layui-btn">选择分类</a>
            </div>
            <div id="catContent" class="layui-form-mid layui-word-aux"></div>
            <input style="display: none" name="cid" id="cid" value="" required="" lay-verify="cid"/>
            <input style="display: none" name="id" id="id" value="" />
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">商品标题</label>
            <div class="layui-input-inline">
                <input type="text" id="title" name="title" autocomplete="on" class="layui-input" required  lay-verify="required" placeholder="请输入标题"/>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">商品卖点</label>
            <div class="layui-input-inline">
                <input type="text" id="sellPoint" name="sellPoint" autocomplete="off" class="layui-input"  required  lay-verify="required" <%--placeholder="请输入商品卖点"--%> />
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">商品价格：</label>
            <div class="layui-input-inline">
                <input type="text" id="price" name="price" autocomplete="off" class="layui-input" required  lay-verify="required" <%--placeholder="请输入商品价格"--%>/>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">商品库存：</label>
            <div class="layui-input-inline">
                <input type="text" id="num" name="num"  autocomplete="off" class="layui-input" required  lay-verify="required" />
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">条形码：</label>
            <div class="layui-input-inline">
                <input type="text" id="barcode" name="barcode" autocomplete="off" class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">商品图片：</label>
            <div class="layui-input-inline">
                <div class="layui-upload">
                    <button type="button" class="layui-btn" id="uploadItemImg">选择图片</button>
                </div>
            </div>
        </div>
        <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;">
            预览图：
            <div class="layui-upload-list" id=uploadImg></div>
        </blockquote>
        <%--表单内容输入区 end--%>

        <%--提交保存--%>
        <div class="layui-form-item">
            <label class="layui-form-label"></label>
            <button class="layui-btn" lay-filter="add" lay-submit="">保存</button>
        </div>

    </form>
</div>

<script>


    //表单提交
    layui.use(['form', 'layer'], function () {
        $ = layui.jquery;
        var form = layui.form,
            layer = layui.layer;
        form.render();
        //step.1 自定义验证规则
        form.verify({
            cid: function(value){
                if(value === ""){
                    return '请选择一个分类！';
                }
            }
        });

        //各种基于事件的操作，下面会有进一步介绍

        //step.2 监听提交
        form.on('submit(add)', function (data) {
            //发异步，把数据提交给
            console.log(data.field.id)
            var url = "item/add";
            if(!isNull(data.field.id)){
                url = "item/updateItem";
            }
            $.post(url, data.field, function (res) {
                console.log(res);
                if (res.code == "0000") {
                    // layer.msg(res.msg, {time: 2000});
                    layer.alert("保存成功", {icon: 6}, function () {
                        // 获得frame索引
                        console.log("name"+window.name);
                        if(window.name != "") {
                            var index = parent.layer.getFrameIndex(window.name);
                            //关闭当前frame
                            parent.layer.close(index);
                        }
                        window.location.href="/item-list"
                    });
                } else {
                    layer.msg(res.msg, {time: 2000});
                }
            }, 'json');
            return false;
        });

        var itemId = GetQueryString("itemId");
        if (!isNull(itemId)) {
            $.get("/item/"+itemId, function (data) {
                var data = data.data;
                initInputVal(data);
            });
        }


    });
</script>

<script>
    layui.use('upload', function () {
        var $ = layui.jquery
            , upload = layui.upload;

        //多图片上传
        upload.render({
            elem: '#uploadItemImg'
            , url: '/upload/'
            , multiple: true
            , before: function (obj) {
                //预读本地文件示例，不支持ie8
                obj.preview(function (index, file, result) {
                    $('#uploadImg').append('<img style="height:90px;width:90px" src="' + result + '" alt="' + file.name + '" class="layui-upload-img">')
                });
            }
            , done: function (res) {
                //上传完毕
            }
        });
    });
</script>

</body>
</html>
